<!-- 1.编写计数器案例

        2.编写鼠标拖动div案例

        3.编写二级菜单（点击）

        4.编写三级菜单（点击）

        5.编写页签

        6.编写伸缩菜单

        7.编写点击回到顶部，页面逐渐滚动到顶部

        8.编写轮播图，点击切换轮播效果
        
        9.鼠标拖尾特效 -->








<!-- 鼠标拖尾 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标拖尾特效</title>
    <script src="/JS/jquery-3.7.1.min.js"></script>
</head>

<body>
    <script>
        $(document).on("mousemove", function (e) {
            let $img = $("<img>");
            console.log("鼠标移动了");
            
            $img.attr("src", "/素材/img/QQ.png");
            let width = Math.floor(Math.random() * 100) + 2;
            $img.css({
                width: width + "px",
                left: (e.pageX - width / 2) + "px",
                top: (e.pageY - width / 2) + "px",
                position: "absolute"
            });

            $("body").append($img);
            setTimeout(function () {
                $img.remove();
            }, 100);
        });
    </script>
</body>

</html>